<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue项目信息</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        h1, h2, h3 {
            color: #42b883;
        }
        .project-info {
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
        }
        .file-list {
            background-color: #f9f9f9;
            padding: 15px;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
        }
        .feature {
            margin-bottom: 20px;
            padding: 15px;
            border-left: 4px solid #42b883;
            background-color: #f0fff4;
        }
        .note {
            background-color: #fff3cd;
            padding: 15px;
            border-radius: 6px;
            border-left: 4px solid #ffc107;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <h1>Vue Frontend 项目信息</h1>
    
    <div class="project-info">
        <h2>项目概述</h2>
        <p>这是一个基于 Vue 3 和 Vue Router 的前端项目。由于环境限制，无法直接运行完整的 Vue 应用，但您可以查看以下项目结构和功能信息。</p>
    </div>
    
    <div class="feature">
        <h3>主要功能</h3>
        <ul>
            <li><strong>首页</strong> - 项目主页面</li>
            <li><strong>关于页</strong> - 项目介绍页面</li>
            <li><strong>登录系统</strong> - 用户登录功能</li>
            <li><strong>注册系统</strong> - 新用户注册功能</li>
            <li><strong>新闻展示</strong> - 包含新闻横幅、标题和内容区域的组件</li>
        </ul>
    </div>
    
    <div class="feature">
        <h3>项目结构</h3>
        <div class="file-list">
            <pre>vuefrontend/
├── src/
│   ├── assets/           # 静态资源文件
│   ├── components/       # Vue 组件
│   │   ├── HelloWorld.vue
│   │   ├── NewsBanner.vue
│   │   ├── NewsHeader.vue
│   │   ├── NewsSection.vue
│   │   ├── TheWelcome.vue
│   │   └── WelcomeItem.vue
│   ├── views/            # 页面视图
│   │   ├── AboutView.vue
│   │   ├── HomeView.vue
│   │   ├── LoginView.vue
│   │   └── RegisterView.vue
│   ├── router/           # 路由配置
│   ├── App.vue           # 根组件
│   └── main.js           # 入口文件
├── server.js             # 简单的 Node.js 服务器
├── package.json          # 项目依赖配置
└── index.html            # HTML 入口</pre>
        </div>
    </div>
    
    <div class="feature">
        <h3>后端模拟</h3>
        <p>项目包含一个 <code>server.js</code> 文件，提供了以下 API 接口：</p>
        <ul>
            <li><code>/api/login</code> - 用户登录接口</li>
            <li><code>/api/register</code> - 用户注册接口</li>
        </ul>
    </div>
    
    <div class="note">
        <h3>注意事项</h3>
        <p>要完全运行此项目，您需要：</p>
        <ol>
            <li>安装 Node.js (20.19.0 或更高版本)</li>
            <li>执行 <code>npm install</code> 安装依赖</li>
            <li>执行 <code>npm run dev</code> 启动开发服务器</li>
            <li>或者执行 <code>node server.js</code> 运行后端模拟服务器</li>
        </ol>
    </div>
</body>
</html>